{include file="public/layout" /}
{include file="gzh/header" /}

<body class="bodystyle" style="overflow-y: scroll; cursor: default; -moz-user-select: inherit;">
<div id="append_parent"></div>
<div id="ajaxwaitid"></div>
{include file="canal/left" /}
<div class="page min-hg-c-10" style="min-width:auto;margin-left:100px;">

    <div class="fixed-bar">
        <div class="item-title">
            <a class="back_xin" href="{:url('Gzh/reply_index')}" title="返回"><i class="iconfont e-fanhui"></i></a>
            <div class="subject">
                <h3>新增回复</h3>
                <h5></h5>
            </div>
        </div>
    </div>    
    <form class="form-horizontal" id="post_form" action="" method="post" enctype="multipart/form-data">
        <div class="ncap-form-default">
            <dl class="row">
                <dt class="tit">
                    <label for="title"><em>*</em>规则名称</label>
                </dt>
                <dd class="opt"> 
                    <input type="text" name="rule" id="rule" class="input-txt" autocomplete="off">
                    <span class="err"></span>
                    <p class="notic"></p>
                </dd>
            </dl>
            <dl class="row">
                <dt class="tit">
                    <label for="title"><em>*</em>添加关键字</label>
                </dt>
                <dd class="opt"> 
                    <div class="ment-comment-table" style="width: 588px;">
                        <div class="ment-table-wrapper">
                            <div class="ment-table ment-table-default">
                                <div class="ment-table-header">
                                    <table cellspacing="0" cellpadding="0" border="0" style="width: 588px;">
                                        <colgroup> <col width="400">  <col width="60"> </colgroup>
                                        <thead>
                                            <tr>
                                                <th> <div class="ment-table-cell"><span>关键字</span> </div> </th>
                                                <th> <div class="ment-table-cell"><span>操作</span> </div> </th>
                                            </tr>
                                        </thead>
                                    </table>
                                </div>
                    
                                <div class="ment-table-body">
                                    <table cellspacing="0" cellpadding="0" border="0" style="width: 588px;">
                                        <colgroup> <col width="400">  <col width="60"> </colgroup>
                                        <tbody class="ment-table-tbody" id="comment_add_tr">
                                            <tr draggable="false" class="ment-table-row" id="comment_add_tr_1">
                                                <td >
                                                    <div class="ment-table-cell">
                                                        <input type="text" class="ment-input comment_add_textarea w300" name="keywords[]" placeholder="请输入关键字"/>
                                                    </div>
                                                </td>
                                                
                                                <td > <div class="ment-table-cell"><div class="grey">删除</div></div> </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                        <div class="add-con">
                            <a class="ment-btn ment-btn-text" href="JavaScript:void(0);" data-id="1" onClick="addCommentHtml(this);"><span>+添加关键字</span></a>
                        </div>
                    </div>
                    <span class="err"></span>
                    <p class="notic"></p>
                </dd>
            </dl>
            <dl class="row">
                <dt class="tit">
                    <label for="title"><em>*</em>添加回复内容</label>
                </dt>
                <dd class="opt"> 
                    <div class="ment-comment-table"style="width: 588px;">
                        <div class="ment-table-wrapper">
                            <div class="ment-table ment-table-default">
                                <div class="ment-table-header">
                                    <table cellspacing="0" cellpadding="0" border="0" style="width: 588px;">
                                        <colgroup> <col width="400">  <col width="60"> </colgroup>
                                        <thead>
                                            <tr>
                                                <th> <div class="ment-table-cell"><span>回复内容</span> </div> </th>
                                                <th> <div class="ment-table-cell"><span>操作</span> </div> </th>
                                            </tr>
                                        </thead>
                                    </table>
                                </div>
                    
                                <div class="ment-table-body">
                                    <table cellspacing="0" cellpadding="0" border="0" style="width: 588px;">
                                        <colgroup> <col width="400">  <col width="60"> </colgroup>
                                        <tbody class="ment-table-tbody" id="content_add_tr">
                                            <!--素材列表-->

                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                        <div class="add-con">
                            <a class="ment-btn ment-btn-text mr10" href="JavaScript:void(0);" data-href="{:url('Gzh/selcet_material_list',['type'=>1])}" onclick="openFullframe(this, '选择素材', '1100px', '80%');" ><span>+添加文字</span></a>
                            <a class="ment-btn ment-btn-text" href="JavaScript:void(0);" data-href="{:url('Gzh/selcet_material_list',['type'=>2])}" onclick="openFullframe(this, '选择素材', '1100px', '80%');" ><span>+添加图文</span></a>
                        </div>
                    </div>
                    <span class="err"></span>
                    <p class="notic"></p>
                </dd>
            </dl>
            <div class="bot mt30">
                <a href="JavaScript:void(0);" onclick="formSubmit();" class="ncap-btn-big ncap-btn-green" id="submitBtn">保存</a>
            </div>
        </div>
    </form>
</div>
<script type="text/javascript">
    // 添加评价的html
    function addCommentHtml(obj) {
        // 获取当前评价框最大ID 后 +1
        var id = parseInt($(obj).attr('data-id')) + parseInt(1);
        
        // 追加新的评价框HTML
        var html = [
            '<tr draggable="false" class="ment-table-row" id="comment_add_tr_' + id + '">'+
                '<td class="ment-table-column-jPj8o1">'+
                    '<div class="ment-table-cell">'+
                        '<input type="text" class="ment-input comment_add_textarea w300" placeholder="请输入关键字" name="keywords[]" />'+
                    '</div>'+
                '</td>'+
                '<td class="ment-table-column-6E5cHe"> <div class="ment-table-cell" onClick="delCommentHtml(' + id + ');"><div class="blue curpoin">删除</div></div> </td>'+
            '</tr>'
        ];
        $('#comment_add_tr').append(html);
    
        // 覆盖当前评价框最大ID
        $(obj).attr('data-id', id);
    }
    
    // 删除评价HTML
    function delCommentHtml(id) {
        $('#comment_add_tr_' + id).remove();
    }
    
    function formSubmit() {
        if($.trim($('#rule').val()) == ''){
            showErrorMsg('规则名称不能为空！');
            $('#rule').focus();
            return false;
        }

        var url = "{:url('Gzh/reply_keyword_add')}";
        $.ajax({
            type: 'POST',
            url: url,
            data: $("#post_form").serialize(),
            dataType: 'json',
            success: function(res) {
                if (res.code == 1) {
                    layer.msg(res.msg, {icon: 1, time:1000}, function(){
                        location.href = "{:url('Gzh/reply_index')}"
                    });
                } else {
                    layer.msg(res.msg, {icon: 5});
                }
            },
            error:function (e) {
                layer.alert(e.responseText);
            }
        });
    }

    function selected(obj,type) {
        var id = $(obj).data('id');
        var content = $(obj).data('intro');

        if ('PIC' == type) {
            content = $(obj).data('title');
        }
        var html = "<tr draggable=\"false\" class=\"ment-table-row\">\n" +
            "                                                <td>\n" +
            "                                                <input type=\"hidden\" name=\"material_id[]\" value='"+id+"'>\n" +
            "                                                    <div class=\"ment-table-cell\">\n" + content +
            "                                                    </div>\n" +
            "                                                </td>\n" +
            "                                                <td><div class=\"ment-table-cell\"><div class=\"curpoin basics-color\" onclick='delMaterial(this);'>删除</div></div> </td>\n" +
            "                                            </tr>";
        $("#content_add_tr").append(html);
        layer.closeAll();
    }

    function delMaterial(obj) {
        $(obj).closest('tr').eq(0).remove();
    }
</script>
{include file="public/footer" /}